<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BOKI注册</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/Register.css" rel="stylesheet">
</head>
<body style="height: 100%">
    <div style="background-image: url(https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2734&q=80);background-size: cover;height: 100%;width: 45%;float: left;">
        <div style="text-align: center;margin-top: 30%">
            <h1 class="left-text" style="font-size:400%"><b>一起BOKI。</b></h1>
            <br />
            <br />
            <p class="left-text">超过100,000本图书的自由借阅。</p>
            <p class="left-text">任何地点，任何时间。</p>
        </div>
    </div>
    <div class="container" style="height: 100%;width: 55%;float: left;">
        <div class="Register" style="margin-top: 20%">
            <h1>畅享阅读,一起BOKI。</h1>
            <p class="lead">注册会员，畅享自由的免费借阅。</p>
            <p style="font-size: small">已有账户？立即<a href="/login">登录</a></p>
            <div style="text-align: center">
                <form action="/registerinfo">
                    <br />
                <script>
                    var check1=0;
                    var check2=0;
                    var check3=0;

                    function check(){
                        if(check1===1&check2===1&check3===1){
                            document.getElementById("submit").removeAttribute("disabled");
                        }else{
                            document.getElementById("submit").setAttribute("disabled","disabled");
                        }
                    }

                    function phoneCheck() {
                        var value = document.getElementById("phone").value;
                        var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
                        if (!myreg.test(value)) {
                            document.getElementById("input1").setAttribute("class", "has-error");
                            check1=0;
                        }else{
                            document.getElementById("input1").setAttribute("class", "has-success");
                            check1=1;
                        }
                        check();
                    }

                    function nameCheck() {
                        var value = document.getElementById("name").value;
                        if (value.value===null) {
                            document.getElementById("input2").setAttribute("class", "has-error");
                            check2=0;
                        }else{
                            document.getElementById("input2").setAttribute("class", "has-success");
                            check2=1;}
                        check();
                    }

                    function passwordCheck() {
                        var value = document.getElementById("password").value;
                        if (value.value===null) {
                            document.getElementById("input3").setAttribute("class", "has-error");
                            check3=0;
                        }else{
                            document.getElementById("input3").setAttribute("class", "has-success");
                            check3=1;
                        }
                        check();
                    }


                </script>
                    <div id="input1">
                    <input id="phone" type="text" class="form-control" name="phone" placeholder="请输入手机号" onblur="phoneCheck()">
                    </div>
                    <br />
                    <br />
                    <div id="input2">
                    <input id="name" type="text" class="form-control" name="name" placeholder="请输入用户名" onblur="nameCheck()">
                    </div>
                    <br />
                    <br />
                    <div id="input3">
                    <input id="password" type="password" class="form-control" name="password" placeholder="请输入密码" onblur="passwordCheck()">
                    </div>
                    <br />
                    <br />
                    <button id="submit" type="submit" class="btn btn-default" style="width: 20%" disabled="disabled"><b>现在注册</b></button>
                </form>
            </div>
        </div>
    </div>
</body>

</html>